<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>watch & computed</title>
</head>
<body>
  <div id="app">
    {{allName}}
  </div>
  <script src="/dist/umd/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          name: 'zf',
          age: 10
        }
      },
      watch: {
        // 默认会在内部立即取值
        name: [
          // {  handler: 'handler', sync: false },
          {  handler: 'handler', sync: true },
        ]
      },
      computed: {
        // 默认不会在内部立即取值
        // 依赖的值不变,就不会执行(缓存)
        // 可用于模板的渲染
        allName() {
          console.log('computed: ');
          return this.name + ' - ' + this.age
        }
      },
      methods: {
        handler(newV, oldV) {
          console.log(newV, oldV);
        }
      }
    })
    // 1. 如果监控的key, 对应的值是对象无法获取老状态;
    // 2. watch一个属性, 可以注册多个监听器
    // 3. 可以写成handler的格式, 监听methods中的方法和参数传递
    setTimeout(() => {
      vm.name = 'zs'
    }, 1000)
  </script>
</body>
</html>